<template>
  <div>
      <transition enter-active-class="animate__animated animate__fadeInLeft">
        <router-view></router-view>
      </transition>
      <footer>
        <router-link to="/index/store" class="bot" active-class="change">商城</router-link>
        <router-link to="/index/cate" class="bot" active-class="change">分类</router-link>
        <router-link to="/index/shop" class="bot" active-class="change">购物车</router-link>
        <router-link to="/index/mine" class="bot" active-class="change">我的</router-link>
      </footer>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
footer {
  height: 1.04rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  color: gray;
  background: white;
  position: fixed;
  left: 0;
  bottom: 0;
}
.bot {
  height: 1rem;
  width: 1.8rem;
  line-height: 1rem;
  text-align: center;
  /* position: fixed; */
}
.bottom div {
  /* background: url("../img/index/index\ \(22\).png") no-repeat center center; */
  width: 0.36rem;
  height: 0.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-size: 0.36rem 0.4rem;
}
.bottom li:hover div {
  color: #FF6040;
  /* background: url("../img/index/index\ \(21\).png") no-repeat center center; */
  background-size: 0.36rem 0.4rem;
}
.bottom li:hover p {
  color: #FF6040;
}
.change{background: #FF6040;color: white;}
</style>